<template>
  <el-dialog v-model="visible" :title="title" :width="1000">
    <vxe-table
      ref="tableRef"
      height="400"
      :data="data"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
      }"
    >
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="registType" title="就诊类别" width="140" :edit-render="{}">
        <template #edit="{ row }">
          <el-select v-if="row.editStatus" v-model="row.registType" placeholder="请选择就诊类别">
            <el-option v-for="item in registTypes" :key="item.key" :label="item.key" :value="item.value" />
          </el-select>
          <span v-else>{{ row.registType }}</span>
        </template>
      </vxe-column>
      <vxe-column field="chargeItem" title="费用类别" width="240" :edit-render="{}">
        <template #edit="{ row }">
          <el-radio-group v-if="row.editStatus" v-model="row.chargeItem">
            <el-radio v-for="item in ChargeItems" :key="item.key" :value="item.value">{{ item.key }}</el-radio>
          </el-radio-group>
          <span v-else>{{ row.chargeItem }}</span>
        </template>
      </vxe-column>
      <vxe-column field="calcType" title="计算类别" width="200">
        <template #default="{ row }">
          <el-radio-group v-model="row.calcType">
            <el-radio v-for="item in calcTypes" :key="item.label" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </template>
      </vxe-column>
      <vxe-column field="calcVal" title="计算值" width="160">
        <template #default="{ row }">
          <el-input-number v-model="row.calcVal" :min="0" />
        </template>
      </vxe-column>
      <vxe-column title="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="danger" @click="removeItem(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <div class="flex flex-row flex-justify-between">
        <div>
          <el-button @click="insertItem">新增</el-button>
          <el-button @click="save">保存</el-button>
        </div>
        <div>
          <el-button @click="refresh">刷新</el-button>
          <el-button @click="visible = false"> 关闭</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { RegisterBaseAPIs, type ClinicTypeCharge, ChargeItems } from '@/api/register/base'
import { ref, watch } from 'vue'
import type { VxeTableInstance } from 'vxe-table'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { KeyValue } from '@/api/common'

const visible = ref(false)
const clinicType = ref('')
const tableRef = ref<VxeTableInstance<ClinicTypeCharge>>()
const data = ref<ClinicTypeCharge[]>([])

/**挂号类型 */
const registTypes = ref<KeyValue[]>([
  { key: '初诊', value: '初诊' },
  { key: '复诊', value: '复诊' },
  { key: '急诊', value: '急诊' },
  { key: '便民', value: '便民' },
])

/**挂号费计算类型 */
const calcTypes = ref([
  { label: '按值', value: 0 },
  { label: '按比例', value: 1 },
])

/**标题 */
const title = computed(() => {
  let value = '计算方式维护'
  if (!(clinicType.value === '' || clinicType.value === undefined)) {
    value = `${value}[${clinicType.value}]`
  }

  return value
})

/**窗口显示 */
watch(visible, val => {
  if (val) {
    refresh()
  }
})

/**新增项目 */
function insertItem() {
  const $table = tableRef.value
  if ($table) {
    $table.insert({
      clinicType: '',
      registType: '',
      calcType: 0,
      calcValue: 1,
      editStatus: true,
    })
  }
}

/**保存 */
function save() {
  const $table = tableRef.value
  if ($table) {
    ElMessageBox.confirm('是否保存数据?', '系统提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage.success('保存成功')
    })
  }
}

/**删除项目 */
function removeItem(row: ClinicTypeCharge) {
  const $table = tableRef.value
  if ($table) {
    $table.remove(row)
  }
}

/**刷新 */
async function refresh() {
  data.value = await RegisterBaseAPIs.getClinicTypeCharge(clinicType.value)
}

/**显示 */
function display(cType: string) {
  clinicType.value = cType
  visible.value = true
}

defineExpose({ display })
</script>

<style lang="scss"></style>
